.box {
    width: 1200px;
    margin: 0 auto;
}

.top-bg {
    min-width: 1440px;
    width: 100%;
    height: 42px;
    background: #3D3D3D;
}

.top-content {
    position: relative;
    width: 1200px;
    height: 42px;
    margin: 0 auto;
    padding: 0 10px 0 20px;
    color: #DADADA;
    box-sizing: border-box;
}

.headX {
    background: url("../img/tofel-img2.gif") no-repeat;
    background-size: 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.top-ul {
    position: absolute;
    top: 0;
    left: 80px;
    font-size: 14px;
}

.top-ul-li3 {
    background: #FFF;
}

.top-ul a {
    color: #DADADA;
}

.top-ul-li3 a {
    color: #787878;
}

.top-ul li {
    float: left;
    padding: 0 10px;
    line-height: 43px;
}

.top-ul-li5 {
    margin: 0 20px 0 10px;
}

.top-ul-li6 span {
    color: #FFF;
    padding-left: 20px;
    border-left: solid 1px #4A5967;
}

.top-ul-li6 input {
    position: relative;
    left: 5px;
    top: -2px;
    font-size: 12px;
    padding: 2px 5px;
    background: linear-gradient(to top,#F2F2F2,#D8D8D8,#F2F2F2);
    border-radius: 3px;
}

.top-ul li:last-child {
    color: #FFF;
    margin-left: 60px;
}

.top-right {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 42px;
}

.appBtn {
    position: relative;
    float: left;
    margin-right: 30px;
    width: 130px;
    text-align: center;
    background: url("../img/bg-arr2.gif") no-repeat 85px 22px;
    color: #FFF;
    font-size: 20px;
    cursor: pointer;
}

.appBtn:hover {
    background: #F3F7F7 url("../img/bg-arr1.gif") no-repeat 85px 22px;
    color: #000;
}

.top-right-btn {
    color: #FFF;
    background: #3D3D3D;
    border: solid 1px #FFF;
    border-radius: 3px;
    font-size: 14px;
    padding: 5px 25px;
    margin-right: 10px;
}

.app-ul {
    position: absolute;
    top: 42px;
    width: 180px;
    background: #F3F7F7;
    display: none;
}

.app-ul li {
    padding: 10px 5px;
    cursor: pointer;
}

.app-ul li:hover {
    background: #3E3E3E;
    color: #FFF;
}

.app-ul-li1 span {
    display: block;
    padding-left: 35px;
    line-height: 30px;
    font-size: 16px;
    background: url("../img/app-img.gif") no-repeat left;
    background-size: contain;
}

.app-ul-li2 span {
    display: block;
    padding-left: 35px;
    line-height: 30px;
    font-size: 16px;
    background: url("../img/app-img2.gif") no-repeat left;
    background-size: contain;
}

.main-nav {
    margin-top: 30px;
    background: url("../img/tofel-img3.gif") no-repeat left;
    height: 30px;
}

.main-ul {
    margin-left: 180px;
}

.main-ul a {
    font-size: 16px;
    color: #4A4A4A;
}

.main-ul li {
    line-height: 30px;
    display: inline-block;
    margin-right: 40px;
}

.main-ul-li1 a {
    color: #02ABEF;
}

.main-img1 {
    margin-top: 20px;
}

.main-courseT {
    position: relative;
    margin-top: 20px;
}

.main-courseT-left {
    position: relative;
    width: 611px;
}

.courseT-left-ul {
    width: 146px;
}

.courseT-left-ul li{
    text-align: center;
    background: #23CBDB;
    height: 88px;
}

.courseT-left-ul img {
    margin-top: 15px;
}

.courseT-left-ul p {
    color: #FFF;
    font-size: 14px;
    margin-top: 5px;
}

.courseT-left-ul li:hover {
    background: #3BDEF1;
    cursor: pointer;
}

.main-courseT-left-right {
    position: absolute;
    top: 0;
    right: 0;
}

.main-courseT-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 589px;
    height: 264px;
    color: #FFF;
}

.courseT-right-left {
    position: relative;
    width: 266px;
    height: 264px;
    background: url("../img/tofel-img7.gif") no-repeat 0 bottom;
    cursor: pointer;
}

.courseT-right-right {
    position: absolute;
    right: 0;
    top: 0;
    background: url("../img/tofel-img8.gif") no-repeat 0 bottom;
    width: 307px;
    height: 264px;
    cursor: pointer;
}

.hear {
    height: 132px;
    background: #33B16D;
}

.word {
    height: 132px;
    background: #04CFAC;
}

/*背景颜色的过渡*/

.hear,
.word,
.courseB-child1-cont,
.courseB-child3-cont{
    -webkit-transition: height 0.2s linear ;
       -moz-transition: height 0.2s linear ;
        -ms-transition: height 0.2s linear ;
         -o-transition: height 0.2s linear ;
            transition: height 0.2s linear ;
}

.courseB-child2-cont {
    -webkit-transition: width 0.5s linear ;
       -moz-transition: width 0.5s linear ;
        -ms-transition: width 0.5s linear ;
         -o-transition: width 0.5s linear ;
            transition: width 0.5s linear ;
}

.courseT-right-left:hover .hear,
.courseT-right-right:hover .word,
.main-courseB-child1:hover .courseB-child1-cont,
.main-courseB-child3:hover .courseB-child3-cont {
    height: 100%;
}

.main-courseB-child2:hover .courseB-child2-cont {
    width: 100%;
}

.hear-font,
.word-font {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 50px;
}

.hear p {
    width: 100px;
}

.word p {
    width: 110px;
}

.hear p ,
.word p {
    position: absolute;
    top: 30px;
    left: 40px;

}

/*P标签 的样式 和过渡*/

.hear p,
.word p,
.courseB-child1-cont p,
.courseB-child2-cont p,
.courseB-child3-cont p {
    height: 44px;
    font-size: 15px;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 25px;
    overflow: hidden;
    -webkit-transition: all 0.5s linear ;
       -moz-transition: all 0.5s linear ;
        -ms-transition: all 0.5s linear ;
         -o-transition: all 0.5s linear ;
            transition: all 0.5s linear ;
}

.myP-A {
    -webkit-transition: all 0.5s linear ;
       -moz-transition: all 0.5s linear ;
        -ms-transition: all 0.5s linear ;
         -o-transition: all 0.5s linear ;
            transition: all 0.5s linear ;
}

/*鼠标悬浮 P标签下移*/

.courseT-right-left:hover p,
.courseT-right-right:hover p,
.main-courseB-child1:hover p,
.main-courseB-child3:hover p,
.main-courseB-child3:hover .myP-A {
    height: auto;
    top: 20%;
}

.hear p:after {
    background: url("../img/ellipsis_bg01.png") repeat-y;
}

.word p:after {
     background: url("../img/ellipsis_bg02.png") repeat-y;
 }

/*省略号的定位和样式*/

.hear p:after,
.word p:after,
.courseB-child1-cont p:after,
.courseB-child3-cont p:after {
    position: absolute;
    right: 0;
    bottom: -2px;
    content: "...";
    font-weight: 700;
    padding: 0 20px 0 45px;
}

/*鼠标悬浮后 清除省略号*/

.courseT-right-left:hover p:after,
.courseT-right-right:hover p:after,
.main-courseB-child1:hover p:after,
.main-courseB-child3:hover p:after {
    background: none;
    content: "";
}

.hear a,
.word a {
    right: 20px;
    bottom: 140px;
    padding: 2px 15px;
}

/*"查看更多" 的样式 和过渡*/

.hear a,
.word a,
.courseB-child1-cont a,
.courseB-child2-cont a,
.courseB-child3-cont a {
    position: absolute;
    color: #FFF;
    border: solid 1px #FFF;
    border-radius: 10px;
    -webkit-transition: all 0.3s linear ;
       -moz-transition: all 0.3s linear ;
        -ms-transition: all 0.3s linear ;
         -o-transition: all 0.3s linear ;
            transition: all 0.3s linear ;
}

.courseT-right-left:hover a,
.courseT-right-right:hover a{
    bottom: 120px;
}

.main-courseB {
    position: relative;
    margin-top: 20px;
    height: 327px;
    color: #FFF;
}

.main-courseB-child1 {
    position: relative;
    background: url("../img/tofel-img9.gif") no-repeat 0 bottom;
    width: 242px;
    height: 327px;
    cursor: pointer;
}

.courseB-child1-cont {
    background: #02B7EE;
    height: 164px;
}

.courseB-child1-cont span {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 50px;
}

.courseB-child1-cont p {
    position: absolute;
    left: 100px;
    top: 30px;
    width: 110px;
}

.courseB-child1-cont p:after {
    background: url("../img/ellipsis_bg03.png") repeat-y;
    padding: 0 20px 0 35px;
}

.courseB-child1-cont a {
    position: absolute;
    right: 30px;
    top: 110px;
    padding: 2px 15px;
}

.main-courseB-child1:hover a {
    top: 160px;
}

.main-courseB-child2 {
    position: absolute;
    top: 0;
    left: 257px;
    background: url("../img/tofel-img12.gif") no-repeat right;
    width: 549px;
    height: 327px;
    cursor: pointer;
}

.courseB-child2-cont {
    position: relative;
    background: #F8B552;
    width: 330px;
    height: 327px;
}

.courseB-child2-cont span {
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 50px;
}

.courseB-child2-cont p {
    position: absolute;
    top: 120px;
    left: 50px;
    width: 240px;
}

.main-courseB-child2:hover p {
    width: 470px;
}

.courseB-child2-cont a {
    bottom: 30px;
    right: 30px;
    padding: 2px 20px;
}

.main-courseB-child3 {
    position: absolute;
    top: 0;
    left: 810px;
    background: url("../img/tofel-img10.gif") no-repeat 0 bottom;
    width: 203px;
    height: 327px;
    cursor: pointer;
}

.courseB-child3-cont {
    position: relative;
    background: #5FC2DF;
    height: 164px;
}

.courseB-child3-cont span {
    position: absolute;
    top: 20px;
    left: 15px;
    font-size: 50px;
}

.myP-A {
    position: absolute;
    top: 35px;
    left: 80px;
}

.courseB-child3-cont p {
    width: 100px;
}

.courseB-child3-cont p:after {
    background: url("../img/ellipsis_bg04.png") repeat-y;
}

.courseB-child3-cont a {
    right: 0;
    bottom: -40px;
    padding: 2px 5px;
}

.main-courseB-child4 {
    position: absolute;
    right: 0;
    top: 0;
    background: #DD4F5A;
    width: 181px;
    height: 327px;
}

.courseB-child4-code {
    width: 162px;
    height: 155px;
    background: #FFF;
    border-radius: 5px;
    text-align: center;
    line-height: 155px;
    margin: 30px 10px 0 10px;
}

.child4-font {
    font-size: 50px;
    margin: 30px 10px 0 10px;
}

.child4-font2 {
    margin: 10px;
}

.title-img {
    text-align: center;
    margin: 40px 0 25px 0;
}

.teacher-t {
    position: relative;
    margin-bottom: 20px;
    color: #000;
}

.teacher-t-l {
    position: relative;
}

.teacher-t-l,
.teacher-t-r {
    width: 590px;
    height: 245px;
    background: #F2F2F2;
}

.teacher-t-l-intro {
    position: relative;
    width: 325px;
    height: 245px;
    padding: 40px 0 0 25px;
    border-right: solid 10px #E5E5E5;
    box-sizing: border-box;
}

.teacher-t-l-intro:after {
    position: absolute;
    top: 50%;
    left: 325px;
    content: "";
    border: solid 10px transparent;
    border-left-color: #E5E5E5;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.name {
    font-size: 25px;
    font-weight: 700;
}

.teacher-t-l-intro p,
.teacher-b-l-name p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}

.teacher-t-l-intro a,
.teacher-b-l-name a {
    position: absolute;
    right: 0;
    background: url("../img/bg3.gif") no-repeat right top;
    padding-right: 15px;
}

.teacher-t-l-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 265px;
    height: 245px;
}

.icon {
    position: absolute;
    top: 50%;
    left: 30px;
    margin-top: -95px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
}

.l-icon {
    background: url("../img/1452062779262331.jpg") no-repeat center;
    background-size: 190px 190px;
}

.r-icon {
    background: url("../img/1452136139576220.png")no-repeat center;
    background-size: 190px 190px;
}

.teacher-t-r {
    position: absolute;
    top: 0;
    right: 0;
}

.teacher-b-l-intro {
    position: relative;
}

.teacher-b-l-icon {
    width: 245px;
    height: 245px;
}

.teacher-b-l-name {
    position: absolute;
    top: 0;
    right: 0;
    width: 325px;
    height: 245px;
    border-left: solid 10px #E5E5E5;
    padding: 40px 25px 0 25px;
    box-sizing: border-box;
}

.teacher-b-l-name:after {
    position: absolute;
    top: 50%;
    left: -29px;
    content: "";
    border: solid 10px transparent;
    border-right-color: #E5E5E5;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.teacher-b-l-name a {
    right: 25px;
}

.title-img2 {
    text-align: center;
    margin: 40px 0 25px 0;;
}

.student-ul li {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    height: 420px;
}

.student-ul li img {
    width: 190px;
    height: 190px;
    border-radius: 50%;
}

.student-name {
    position: relative;
    background: #13B5B1;
    width: 190px;
    line-height: 50px;
    color: #666;
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    margin: 30px 0 5px 0;
}

.student-name:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -19px;
    border: solid 10px transparent;
    border-bottom-color: #13B5B1;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#name2 {
    background: #F19EC2;
}

#name2:after {
    border-bottom-color: #F19EC2;
}

#name3 {
    background: #F8B551;
}

#name3:after {
    border-bottom-color: #F8B551;
}

#name4 {
    background: #32B16C;
}

#name4:after {
    border-bottom-color: #32B16C;
}

#name5 {
    background: #FFF45C;
}

#name5:after {
    border-bottom-color: #FFF45C;
}

#name6 {
    background: #75DDFF;
}

#name6:after {
    border-bottom-color: #75DDFF;
}

.student-ul-word {
    position: relative;
    width: 190px;
}

.student-ul-word:after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "...";
    background: url("../img/ellipsis_bg05.png") repeat-y;
    padding: 0 20px 0 30px;
}

.student-ul a {
    position: absolute;
    right: 10px;
    bottom: 0;
    background: url("../img/bg3.gif") no-repeat right top;
    padding-right: 13px;
}

/*页尾*/

.footer-title {
    min-width: 1440px;
    width: 100%;
    margin-top: 50px;
    background: #E5E5E5;
    line-height: 70px;
    height: 70px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.footer-title a {
    color: #FFF;
    background: linear-gradient(to right,#196DD3,#1C53A8);
    border-radius: 4px;
    padding: 5px 30px;
    font-weight: 100;
}

.footer-btm {
    position: relative;
    min-width: 1440px;
    width: 100%;
    height: 289px;
    background: #000 url("../img/newIndex_footerbg.png") no-repeat left top;
    background-size: 45% 289px;
}

.call-phone {
    position: absolute;
    left: 20%;
    top: 0;
    width: 248px;
    height: 269px;
    background: url("../img/newIndex_footImg.png") no-repeat;
    color: #FFF;
}

.call-phone-time {
    position: absolute;
    top: 50px;
    right: -30px;
    font-size: 50px;
}

.call-phone-time span {
    font-size: 20px;
    margin-left: 10px;
}

.phone-num {
    position: absolute;
    top: 100px;
    right: -30px;
    font-size: 40px;
}

.footer-btm-r {
    position: absolute;
    top: 50px;
    left: 680px;
}

.footer-btm-r li {
    display: inline-block;
    margin-right: 10px;
}

.footer-btm-r li a {
    color: #FFF;
    font-size: 18px;
    border-left: solid 2px #FFF;
    padding-left: 15px;
}

#first-a {
    border: none;
}

.btm-r-code {
    position: relative;
    margin: 40px 0 0 15px;
    width: 300px;
    height: 110px;
    background: #262626;
    border-radius: 5px;
}

.btm-r-codeL img,
.btm-r-codeR img {
    float: left;
}

.btm-r-codeL-cont,
.btm-r-codeR-cont {
    float: left;
    margin-left: 10px;
    line-height: 20px;
    color: #666;
}

#btm-r-codeL-p1,
#btm-r-codeR-p1 {
    margin-top: 30px;
    font-size: 14px;
    color: #FFF;
}

.btm-r-codeR {
    position: absolute;
    top: 0;
    left: 350px;
    width: 300px;
    height: 110px;
    background: #262626;
    border-radius: 5px;
}

.footer-btm-copy {
    width: 721px;
    color: #FFF;
    margin: 30px 0 0 30px;
    overflow: hidden;
}

.footer-btm-copy a {
    color: #FFF;
}

.fixed {
    position: fixed;
    right: 5px;
    top: 40%;
    border-radius: 40px;
    box-shadow: 0 0 10px #E4E4E4;
    background: #FFF;
}

.fixed li {
    border-top: solid 1px #E5E5E5;
}

#first-li {
    border: none;
    background: url("../img/refer_topImg.png") no-repeat;
    width: 62px;
    height: 62px;
    border-radius: 50%;
}

#two-li {
    border: none;
}

#last-li a {
    display: block;
    background: url("../img/refer_icon06.png") no-repeat center 10px;
    height: 35px;
}

.fixed li a:hover p{
    color: #5fabf8;
}

.fixed a {
    position: relative;
    padding: 8px 0 5px 0;
    display: block;
    text-align: center;
}

.bgImg {
    position: absolute;
    left: 50%;
    margin-left: -12px;
    width: 25px;
    height: 24px;
}

.bgImg1 {
    background: url("../img/refer_icon01.png") no-repeat;
}

.bgImg2 {
    background: url("../img/refer_icon02.png") no-repeat;
}

.bgImg3 {
    background: url("../img/refer_icon03.png") no-repeat;
}

.bgImg4 {
    background: url("../img/refer_icon04.png") no-repeat;
}

.bgImg5 {
    background: url("../img/refer_icon05.png") no-repeat;
}

.fixed a p {
    margin-top: 30px;
    color: #878787;
}

